<template>
  <div class="html">
    <div class="login-container">
      <div class="login-form">
        <div style="margin: 0 auto;width: 300px;">
          <h4 style="text-align: center; margin-bottom: 30px;color: #ffffff">用户登录</h4>
          <button class="btn btn-outline-info" style="width: 147px;" @click="isUserLogin = true">账号密码登录</button>
          <button class="btn btn-outline-info" style="width: 148px;margin-left: 5px;"
            @click="isUserLogin = false">手机邮箱登录</button>
          <div class="content">
            <!-- 账号密码登录表单 -->
            <div v-if="isUserLogin">
              <label for="username" class="form-label">账号:</label>
              <el-input v-model="username" placeholder="请输入用户名" clearable></el-input>
              <label for="password" class="form-label">密码:</label>
              <el-input v-model="password" placeholder="请输入密码" type="password" show-password></el-input>
            </div>

            <!-- 手机邮箱登录表单 -->
            <div v-else>
              <label for="phoneEmail" class="form-label">手机号/邮箱:</label>
              <el-input v-model="phoneEmail" placeholder="请输入手机或邮箱" clearable></el-input>
              <label for="code" class="form-label">验证码:</label>
              <div class="code-input-group">
                <el-input v-model="code" placeholder="请输入验证码" clearable></el-input>
                <button class="btn btn-outline-secondary verify-code-btn" @click="getCode" :disabled="countdown > 0">
                  {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
                </button>
              </div>
            </div>

            <div class="register" style="margin-top: 15px;">
              <div style="cursor: pointer;" @click="register">注册</div>
              <div v-if="isUserLogin" style="cursor: pointer;" @click="forget">忘记密码</div>
            </div>

            <div style="margin-top: 15px;font-size: 11px;display: flex;justify-content: center;align-items: center;">
              <input type="checkbox" id="is_check" v-model="isAgreed" class="agreement-checkbox">
              <div style="margin-top: -2px;">我已阅读并同意 <a href="http://baidu.com">《用户服务协议》</a>和<a
                  href="http://baidu.com">《隐私政策》</a></div>
            </div>
            <button class="btn btn-outline-light" style="margin-top: 15px;width: 100px;float: right;"
              :disabled="loginDisabled" :class="{ 'cursor-not-allowed': loginDisabled }"
              @click="loginUsrLogin">登录</button>
            <button 
              @click="loginUsrLogin">登录</button>
          </div>
        </div>
      </div>
    </div>

    <div id="errorDialog">
      <div id="closeButton01" class="close_morn">X</div>
      <span id="errorMsg"></span>
      <br>
      <button id="closeButton" class="btn btn-group-vertical">关闭</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isUserLogin: true,
      username: '',
      password: '',
      phoneEmail: '',
      code: '',
      countdown: 0,
      isAgreed: false
    }
  },
  computed: {
    loginDisabled() {
      // 1. 先判断协议是否勾选
      if (!this.isAgreed) return true;

      // 2. 再判断当前登录方式的必填字段
      if (this.isUserLogin) {
        return !this.username.trim() || !this.password.trim();
      } else {
        return !this.phoneEmail.trim() || !this.code.trim();
      }
    }
  },
  methods: {
    // 获取验证码
    getCode() {
      if (!this.phoneEmail) {
        alert('请输入手机或邮箱');
        return;
      }

      // 模拟发送验证码
      console.log('发送验证码到:', this.phoneEmail);

      // 开始倒计时
      this.countdown = 60;
      const timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },
    // 登录
    loginUsrLogin() {
      // if (this.isUserLogin) {
      //   console.log('账号密码登录:', this.username, this.password);
      // } else {
      //   console.log('手机验证码登录:', this.phoneEmail, this.code);
      // }
      this.$router.push('/system_mall');
    },
    // 忘记密码
    forget() {
      console.log("忘记密码");
       this.$router.push('/ForgetPwdPage')   
    },
    // 注册
    register() {
      console.log("注册");
      this.$router.push('/RegisterPage') 
    }
  }
}
</script>
<style scoped src="@/assets/demo.css"></style>
<style scoped src="@/assets/bootstrap.css"></style>
<style lang="scss" scoped>
.html{
  background-image: url('@/assets/sponge.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 100vh;
}
.content {
  margin: 0 auto;
  width: 300px;
}

.code-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.code-input-group .el-input {
  flex: 1;
}

.register {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  color: #007bff;
  margin-top: 15px;
}

.form-label {
  display: block;
  margin-bottom: 5px;
}

::v-deep .el-input {
  margin-bottom: 15px;
}

.verify-code-btn {
  height: 32px;
  font-size: 12px;
  padding: 0 8px;
  margin-top: -16px;
}

.agreement-checkbox {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #17a2b8; // 勾选颜色与按钮主题色统一
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}
</style>
